<template>
	<SecondTitle title="设备状态" />
	<Echarts container="accepted-project-ratio" :options="option()" :height="753" />
</template>
<script lang="ts" setup>
	import { ref } from 'vue'
	import * as echarts from 'echarts'
	import dayjs from 'dayjs'
	const option = () => {
		let barData = [
			{
				value: 40,
				itemStyle: {
					color: new echarts.graphic.LinearGradient(
						0,
						1,
						0,
						0,
						[
							{
								offset: 0,
								color: 'rgba(91, 255, 229, 0.15)',
							},
							{
								offset: 1,
								color: 'rgba(31, 180, 141, 1)',
							},
						],
						false,
					), // 渐变
				},
			},
			{
				value: 30,
				itemStyle: {
					color: new echarts.graphic.LinearGradient(
						0,
						1,
						0,
						0,
						[
							{
								offset: 0,
								color: 'rgba(137, 137, 137, 0.15)',
							},
							{
								offset: 1,
								color: 'rgba(214, 214, 214, 1)',
							},
						],
						false,
					), // 渐变
				},
			},
			{
				value: 50,
				itemStyle: {
					color: new echarts.graphic.LinearGradient(
						0,
						1,
						0,
						0,
						[
							{
								offset: 0,
								color: 'rgba(91, 203, 255, 0.15)',
							},
							{
								offset: 1,
								color: 'rgba(47, 156, 255, 1)',
							},
						],
						false,
					), // 渐变
				},
			},
			{
				value: 20,
				itemStyle: {
					color: new echarts.graphic.LinearGradient(
						0,
						1,
						0,
						0,
						[
							{
								offset: 0,
								color: 'rgba(255, 217, 91, 0.15)',
							},
							{
								offset: 1,
								color: 'rgba(255, 199, 104, 1)',
							},
						],
						false,
					), // 渐变
				},
			},
		]

		let opt = {
			grid: {
				left: '5%',
				right: '0%',
				bottom: '10%',
				top: '15%',
				containLabel: true,
				z: 22,
			},
			xAxis: {
				type: 'category',
				data: ['正常', '离线', '故障', '告警'],
				axisLabel: {
					textStyle: {
						color: '#A4BACE',
						fontSize: 28,
						padding: [10, 40, 0, 0],
					},
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: 'rgba(31, 75, 123, 1)',
					},
				},
				axisTick: {
					show: false,
				},
			},
			yAxis: {
				name: '台',
				nameLocation: 'end',
				nameTextStyle: {
					padding: [0, 0, 0, -105],
					lineHeight: 60,
					color: 'rgba(95, 179, 255, 1)',
					fontSize: 28,
				},
				type: 'value',
				max: 100,
				axisLabel: {
					textStyle: {
						color: '#A4BACE',
						fontSize: 28,
						padding: [0, 25, 0, 0],
					},
				},
				splitLine: {
					show: true,
					lineStyle: {
						type: 'dashed',
						color: 'rgba(255, 255, 255, .5)',
					},
				},
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow',
				},
				backgroundColor: 'rgba(49, 59, 79, 0.8)',
				borderWidth: 1,
				borderColor: 'rgba(255, 255, 255, 0.2)',
				textStyle: {
					color: '#fff',
					fontSize: 30,
				},
				formatter: function (params: any) {
					// 过滤出只需要显示的系列
					const filteredSeries = params.filter((param: any) => param.seriesName !== 'bar')

					// 如果没有需要显示的系列，返回空
					if (filteredSeries.length === 0) {
						return ''
					}

					// 构造 tooltip 内容
					let tooltipText = `设备状态  ${params[0].name}<br/>`
					filteredSeries.forEach((item: any) => {
						tooltipText += `${item.marker}${item.seriesName}: ${item.value}台<br/>`
					})

					return tooltipText
				},
			},
			series: [
				{
					data: barData,
					type: 'bar',
					barWidth: 26,

					name: '数量',
				},
				{
					data: barData.map((_) => 100),
					type: 'bar',
					barWidth: 105,
					name: 'bar',
					barGap: '-250%',
					itemStyle: {
						color: 'rgba(219, 238, 255, 0.1036)',
					},
				},
			],
		}
		return opt
	}
</script>

<style lang="scss" scoped></style>
